﻿@page "/diagram/venn-diagram"

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes classifications of data science using Venn diagrams. Diagram nodes and annotations are used to define Venn diagrams. Read-only mode is enabled in this example.</p>
    <p style="font-weight: bold;">A new blazor diagram component which provides better performance than the existing diagram control in Blazor WebAssembly App. It is available in preview mode. Check the samples <a target='_blank' href='diagramcomponent/flowchart'>here</a>.</p>
</SampleDescription>
<ActionDescription>
  <p>This example shows how to create a Venn diagram using the Diagram control.In this example, zoom and pan options are enabled.The <a target='_blank' href='https://blazor.syncfusion.com/documentation/diagram/tools/'>Tool</a> property of the Diagram control allows you to enable and disable zoom and pan options.</p><br> 
</ActionDescription>

@*Hidden:Lines*@
<div class="control-section" style="padding:0px">
    <div style="text-align:center">
        @*End:Hidden*@
        <SfDiagram Height="580px" Nodes="@NodeCollection" Tool="@DiagramTools.ZoomPan" BackgroundColor="white">
            <DiagramPageSettings>
                <DiagramFitOptions CanFit="true" Mode="FitModes.Page"></DiagramFitOptions>
                <DiagramSnapSettings Constraints="@SnapConstraints.None"></DiagramSnapSettings>
            </DiagramPageSettings>
        </SfDiagram>
        @*Hidden:Lines*@
    </div>
</div>
<style>
    .row {
        display: block;
    }

    #container {
        display: block;
    }
</style>
@*End:Hidden*@

@code{

    public ObservableCollection<DiagramNode> NodeCollection
    {
        get;
        set;
    }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();


        #region BpmnShapeModel
        DiagramNodeAnnotation DatascienceAnnot = new DiagramNodeAnnotation()
        {
            Content = "Data Science",
            Offset = { X = 0.5, Y = 0.10 },
            Style = new AnnotationStyle() { FontSize = 14, Bold = true }
        };

        DiagramNode DatascienceNode = new DiagramNode()
        {
            Id = "datascience",
            OffsetX = 450,
            OffsetY = 232,
            Width = 400,
            Height = 400,
            Style = new NodeShapeStyle() { Fill = "white", StrokeColor = "#acacac", StrokeWidth = 1 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
            {
                DatascienceAnnot
            }

        };
        NodeCollection.Add(DatascienceNode);

        ObservableCollection<DiagramNodeAnnotation> TrignometryAnnot = new ObservableCollection<DiagramNodeAnnotation>()
        {
             new DiagramNodeAnnotation() { Content = "Trignometry", Offset = { X = 0.5, Y = 0.4 }, HorizontalAlignment = HorizontalAlignment.Left },
             new DiagramNodeAnnotation()   { Content = "Thesis", Offset = { X = 0.45, Y = 0.8 }}
        };


        DiagramNode TrignometryNode = new DiagramNode()
        {
            Id = "trignometry",
            OffsetX = 515,
            OffsetY = 205,
            Width = 200,
            Height = 200,
            Style = new NodeShapeStyle() { Fill = "#feb42f", StrokeColor = "#feb42f", Opacity = 0.2 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = TrignometryAnnot

        };
        NodeCollection.Add(TrignometryNode);

        DiagramNodeAnnotation ExpertiseAnnot = new DiagramNodeAnnotation() { Content = "Expertise", Offset = { X = 0.5, Y = 0.7 }, VerticalAlignment = VerticalAlignment.Top };

        DiagramNode ExpertiseNode = new DiagramNode()
        {
            Id = "expertise",
            OffsetX = 445,
            OffsetY = 290,
            Width = 200,
            Height = 200,
            Style = new NodeShapeStyle() { Fill = "#6acbd4", StrokeColor = "#6acbd4", Opacity = 0.2 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
                ExpertiseAnnot
            }

        };
        NodeCollection.Add(ExpertiseNode);

        ObservableCollection<DiagramNodeAnnotation> ProgrammingAnnot = new ObservableCollection<DiagramNodeAnnotation>(){
            new DiagramNodeAnnotation() { Content = "Programming", Offset = { X = 0.5, Y = 0.4 }, HorizontalAlignment = HorizontalAlignment.Right },
            new DiagramNodeAnnotation(){ Content = "Assembly", Offset = { X = 0.7, Y = 0.35 }, HorizontalAlignment = HorizontalAlignment.Left },
            new DiagramNodeAnnotation(){ Content = "Horizon", Offset = { X = 0.7, Y = 0.6 }, HorizontalAlignment = HorizontalAlignment.Left },
            new DiagramNodeAnnotation(){ Content = "Middleware", Offset = { X = 0.5, Y = 0.8 }, HorizontalAlignment = HorizontalAlignment.Left },
        };

        DiagramNode ProgrammingNode = new DiagramNode()
        {
            Id = "programming",
            OffsetX = 388,
            OffsetY = 205,
            Width = 200,
            Height = 200,
            Style = new NodeShapeStyle() { Fill = "#ed1d79", StrokeColor = "#ed1d79", Opacity = 0.2 },
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Ellipse },
            Annotations = ProgrammingAnnot

        };
        NodeCollection.Add(ProgrammingNode);


        #endregion
    }
}







